<template>
  <div 
    class='vw-tab bg-repeat-no bg-size-100 bg-position-l-c f-column f-b-c' 
    @click='isShowDetail=false' 
    :style='{ backgroundImage: `url(${background2})`}'
  >
    <transition-group name='down' tag='div'>
      <img 
        v-for='(item,index) in banners' 
        v-show='index===round'
        :key='item' 
        :src='item' 
        alt="" 
        class='w-per-100'
      >
    </transition-group>
    <transition-group name='left' tag='main' :class='`p-f-xc-yb w-per-${percent} m-b-${bottom}`'>
      <ul v-for='(unit,index) in options' :key='index' v-show='index===round'>
        <li 
          v-for='item in list' 
          :key='item.value' 
          :class='`animated ${animates[round]} p-r bg-repeat-no bg-size-100 bg-position-l-t f-s-c active-skew m-tb-${margin} `'
          @click.prevent.stop='()=>onSelectOption(item)'
        >
          <img :src="item.background" alt="" class='w-per-100'>
          <transition name='op'>
            <img v-if='item.value===tabs[round]' src="../image/icon_ok.png" alt="" :class='`p-a-xl-yc w-65 m-l-25 ease-400`'>
          </transition>
          <transition name='op'>
            <img v-if='item.value!==tabs[round]' :src="values[item.value]" alt="" :class='`p-a-xl-yc w-${size} m-l-${offset}`'>
          </transition>
        </li>
      </ul>
    </transition-group>
    <transition name='op'>
      <aside v-if='isShowDetail' :class='`bg-repeat-no bg-size-100 bg-position-l-c f-column f-c p-a m-b-${bottom}`' :style='{backgroundImage: `url(${background})`}'>
        <img :src='detail.detail' alt="" :class='`h-per-${detail.height||30}`'>
        <img v-if='round<options.length-1' @click.prevent.stop='onNext'  src="../image/btn_next.png" alt="" class='h-50 m-t-60 active-scale'>
        <img v-else @click.prevent.stop='onResult' src="../image/btn_result.png" alt="" class='h-50 m-t-60 active-scale'>
      </aside>
    </transition>
  </div>
</template>

<script>
import { options, banners, values, animates } from './constant';
import mixin from './mixin'

export default {
  mixins: [mixin],
  data() {
    return {
      isShowDetail: false,
      round: 0, // 1,2,3
      banners,
      options,
      values,
      animates,
      detail: {
        detail: '',
        background: '',
        value: '',
        height: ''
      },
      tabs: ['','',''],
      list: [],
    }
  },
  mounted() {
    this.onGetList(true)
  },
  computed:{
    percent() {
      // if (this.height>800) return 60
      return 50;
    },
    bottom() {
      // if (this.height>800) return 20;
      // if (this.height>700) return 40;
      // if (this.height>600) return 20;
      return 5
    },
    margin() {
      // if (this.height>800) return 10;
      return 5;
    },
    size() {
      // if (this.height>800) return 18;
      return 25;
    },
    offset() {
      // if (this.height>800) return 21;
      return 32;
    },
    background() {
      return require("../image/bg_tab_result.png")
    },
    background2() {
      return require("../image/bg_tab.png")
    }
  },
  // watch: {
  //   isShowDetail(to) {
  //     !to && this.onGetList();
  //   }
  // },
  methods: {
    onSelectOption(item) {
      this.detail = {...item};
      this.tabs[this.round]=item.value;
      const tabs = [...this.tabs];
      this.tabs=[];
      this.tabs = [...tabs];
      setTimeout(()=>{
        this.isShowDetail=true;
      },250);
      // console.log(this.tabs)
    },
    onNext() {
      this.round+=1;
      this.isShowDetail=false;
      this.onGetList();
    },
    onResult() {
      this.isShowDetail = false;
      // console.log(this.tabs);
      const type1 = 'BBB,BBA,BBC,BBD,BAA,BAB,BAC,BAD,BCA,BCB,BCC,BCD,BDA,BDB,BDC,BDB';
      const type2 = 'AAA,AAB,AAC,AAD,ABA,ABB,ABC,ABD,ACA,ACB,ACC,ACD,ADA,ADB,ADC,ADD';
      const type3 = 'DDA,DDB,DDC,DDD,DAA,DAB,DAC,DAD,DBA,DBB,DBC,DBD,DCA,DCB,DCC,DCD';
      const type4 = 'CCA,CCB,CCC,CCD,CAD,CBD,CCD,CDD,CBA,CBB,CBC,CBD,CDA,CDB,CDC,CDD';
      const tabs = this.tabs.join('').toUpperCase();
      // console.log(tabs);
      const tabList = [
        type1.split(','),
        type2.split(','),
        type3.split(','),
        type4.split(','),
      ];
      const type = tabList.findIndex(arr=>arr.includes(tabs));
      // console.log(type);
      this.$router.push(`/result/${type+1}`)
    },
    async onGetList(isJump) {
      this.list = [];
      // if (!isJump) {
      //   let length = this.list.length;
        
      //   do {
      //     await new Promise((resolve)=>{
      //       setTimeout(()=>{
      //         this.list.pop();
      //         resolve();
      //       },300)
      //     })
      //     .then(()=>{
      //       length = this.list.length
      //     });
      //     console.log(1111,length)
      //   } while (length<=0);
      // }

      this.list  =  this.options[this.round];
      // let index = 0;
      // do {
      //   await new Promise((resolve)=>{
      //     setTimeout(()=>{
      //       this.list.push(this.options[this.round][index]);
      //       resolve()
      //     },300)
      //   })
      //   .then(()=>{
      //     index++
      //   })
      // } while (index<4);

    }
  }
}
</script>

<style lang='stylus'>
.vw-tab
  >main
    bottom 160px
    height 472px
    // overflow hidden
    >ul
      height 472px
  >aside
    bottom 190px
    left 30px
    width 688px
    height 460px
</style>